<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>指标文件</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <link rel="stylesheet" href="index.css">
</head>

<body style="margin:0; font-family:'微软雅黑'; font-size:10pt; background-image:url(../wp-content_images/open.png);background-repeat:no-repeat;background-size: cover;">
    <div class="example">
        <h2>指标文件</h2>
        <div id="fileTreeDemo_1" class="demo">
            <ul>
                <li class="list-item" style="background: url('./images/directory1.png') no-repeat left top;">
                    <a href="#" data-path="../pdf/zhibiao/《建设工程造价指标与应用分析》" onclick="handleClick(event, this)">
                        建设工程造价指标与应用分析
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div style="float:left; background-color:#fff; width:750px; height:680px;">
        <iframe src="../pdf/zhibiao/工程投资估算内容构成表.pdf" frameborder="0" height="680" width="100%" id="ifs" scrolling="auto"></iframe>
    </div>

    <script>
        // 模拟文件系统数据
        const fileSystem = {
            "../pdf/zhibiao/《建设工程造价指标与应用分析》": ["教科建筑", "居住建筑", "医疗建筑"],
            "../pdf/zhibiao/《建设工程造价指标与应用分析》/教科建筑": ["子文件夹1", "文件3.pdf"],
            "../pdf/zhibiao/《建设工程造价指标与应用分析》/居住建筑": ["保障房", "商品住宅"],
            "../pdf/zhibiao/《建设工程造价指标与应用分析》/医疗建筑": ["文件6.pdf"],
			"../pdf/zhibiao/《建设工程造价指标与应用分析》/居住建筑/商品住宅": ["底层商品住宅"],
			"../pdf/zhibiao/《建设工程造价指标与应用分析》/居住建筑/商品住宅/底层商品住宅": ["2021年度部门整体绩效自评报告.pdf","深圳市城市轨道交通工程概算编制规程（2017）.pdf"]
        };

        /**
         * 处理点击事件
         * @param {Event} event - 点击事件对象
         * @param {HTMLElement} element - 被点击的a标签元素
         */
		 function handleClick(event, element) {
			event.preventDefault(); // 阻止默认行为

			const path = element.getAttribute("data-path");
			console.log("Clicked path:", path);  // 打印路径，帮助调试

			// 检查是否已经展开
			if (element.dataset.expanded === "true") {
				element.nextElementSibling?.classList.remove('open'); // 收起已展开的子目录
				element.dataset.expanded = "false";
				updateIcon(element, "folder"); // 恢复图标为文件夹未点击状态
				return;
			}

			// 获取当前路径对应的文件/文件夹列表
			const items = fileSystem[path];
			if (!items) {

				
        		// 获取iframe元素
				var iframe = document.getElementById('ifs');
				
				// 更改src属性为新的PDF文件路径
				iframe.src = path;
   

				// alert("文件已打开：" + path);
				updateIcon(element, "file"); // 这里是文件，打开时变成文件图标
				return; // 是文件，则模拟打开文件
			}

			console.log("Items for path:", items);  // 打印子项，帮助调试

			// 创建子项容器
			const ul = document.createElement("ul");
			ul.classList.add("sub-container");

			// 动态生成li标签，并插入a标签
			items.forEach(item => {
				const itemPath = `${path}/${item}`;
				const li = document.createElement("li");

				// 根据文件类型设置背景图片
				if (item.endsWith(".pdf")) {
					li.style.background = "url('./images/pdf1.png') no-repeat left top";
					updateIcon(li, "file"); // PDF文件，设置为文件图标
				} else {
					li.style.background = "url('./images/folder_open1.png') no-repeat left top";
					updateIcon(li, "folder"); // 文件夹，设置为文件夹图标
				}

				const aTag = document.createElement("a");
				aTag.href = "#";
				aTag.textContent = item;
				aTag.setAttribute("data-path", itemPath);
				aTag.setAttribute("data-expanded", "false");
				aTag.onclick = function(e) { handleClick(e, aTag); }; // 绑定点击事件
				li.appendChild(aTag);
				ul.appendChild(li);
			});

			// 将子项容器添加到被点击的a标签后面
			element.parentNode.insertBefore(ul, element.nextElementSibling);

			// 标记为已展开
			element.dataset.expanded = "true";
			updateIcon(element, "folderOpen"); // 更改为文件夹已展开图标

			// 展开子项容器
			ul.classList.add('open');
		}


        /**
		 * 更新图标
		 * @param {HTMLElement} element - 被点击的a标签元素
		 * @param {String} type - 图标类型 ("folder", "folderOpen", "file")
		 */
		function updateIcon(element, type) {
			const parentLi = element.parentNode;

			// 检查 parentLi 是否为空
			if (!parentLi) {
				console.error("parentLi is null or undefined");
				return; // 如果 parentLi 为 null 或 undefined，直接返回
			}

			if (type === "folder") {
				parentLi.classList.remove("folder-open", "file");
				parentLi.classList.add("folder");
			} else if (type === "folder-open") {
				parentLi.classList.remove("folder", "file");
				parentLi.classList.add("folder-open");
			} else if (type === "file") {
				parentLi.classList.remove("folder", "folder-open");
				parentLi.classList.add("file");
			}
		}
    </script>

</body>

</html>
